<template>
	<div class="businessMask">
		<div ref="elememt" :class="windowShow ? 'businessDialog large' : 'businessDialog-hide'" style="width: 1200px;height: 700px;">
			<div class="dialog-header" v-winmove>
				<span>{{ titleName }}</span>
				<span class="icon iconfont iconbiaoqianlan-guanbi" @click="hide"></span>
			</div>
			<div class="dialog-body" style="height: calc(100% - 48px);padding-top: 0px;">
				<div class="buttons-wrapper">
					<div class="businessSearches-left">
						<div class="businessSearchCondition">
							<label>订单编号: </label>
							<el-input placeholder="输入订单编号" v-model="params.partsName"></el-input>
						</div>
						<div class="businessSearchCondition">
							<label>供应商: </label>
							<el-input placeholder="输入供应商" v-model="params.partsName"></el-input>
						</div>
						<div class="businessSearchCondition">
							<label>采购类型: </label>
							<el-select v-model="value" placeholder="请选择">
								<el-option v-for="item in types " :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="businessSearchCondition">
							<label>采购单位: </label>
							<el-input placeholder="输入采购单位" v-model="params.partsName"></el-input>
						</div>
					</div>
					<div class="businessSearches-right">
						<span class="businessButtonConfirm" style="margin-right: 10px;">立即查询</span>
						<span class="businessButtonCancel">清空条件</span>
					</div>
				</div>
				<div class="manage-list">
					<div class="divtable">
						<el-table class="businessTable" :height="tableHeight" :data="tableData" style="width: 100%">
							</el-table-column>
							<el-table-column prop="date" label="日期" width="180">
							</el-table-column>
							<el-table-column prop="name" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="address" label="地址">
							</el-table-column>
						</el-table>

						<el-pagination class="businessPagination" :current-page="pageIndex" :total="totalCount" :page-size="pageSize"
						 :page-sizes="[originPageSize, 10, 15, 20, 50]" background layout="total, sizes, prev, pager, next, jumper"
						 @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
					</div>
					<div class="buttons-wrapper">

						<div class="businessSearchCondition">
							<label>名称: </label>
							<el-input placeholder="输入物资名称" v-model="params.partsName"></el-input>
						</div>
						<div class="businessSearchCondition">
							<label>编码: </label>
							<el-input placeholder="输入物资编码" v-model="params.partsName"></el-input>
						</div>
						<div class="businessSearchCondition">
							<label>工程: </label>
							<el-input placeholder="输入工程名称" v-model="params.partsName"></el-input>
						</div>
						<div class="businessSearchCondition">
							<label>编码: </label>
							<el-input placeholder="输入工程编码" v-model="params.partsName"></el-input>
						</div>
					</div>
					<div class="divtable">
						<el-table class="businessTable" :height="tableHeight" :data="tableData" style="width: 100%">
							</el-table-column>
							<el-table-column prop="date" label="日期" width="180">
							</el-table-column>
							<el-table-column prop="name" label="姓名" width="180">
							</el-table-column>
							<el-table-column prop="address" label="地址">
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import winmove from "@/directives/winmove";
	import {} from "@/business/api/partsOrder.js";
	export default {
		name: "partsOrder",
		props: {
			titleName: {
				default: "新增入库"
			},
		},
		data() {
			return {
				types: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				windowShow: true,
				params: {
					partsName: null
				},
				totalCount: 0,
				pageIndex: 1,
				pageSize: 10,
				originPageSize: null,
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
				tableHeight: 200,
			};
		},
		directives: {
			winmove,
		},
		components: {

		},
		mounted: function() {
			this.originPageSize = this.pageSize;
		},
		methods: {
			hide() {
				this.windowShow = false;
				setTimeout(() => {
					this.$emit("hide");
				}, 400);
			},
			handleCurrentChange(e) {
				this.pageIndex = e;
				this.search();
			},
			// 每页显示页码
			handleSizeChange(e) {
				this.pageSize = e;
				this.search();
			},
			search() {

			}
		},
	};
</script>
<style scoped>
	.manage-list {
		height: calc(100% - 72px);
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		border-radius: 6px;
	}

	.businessSearchCondition {
		width: 200px;
		margin-right: 10px;
	}

	.buttons-wrapper {
		display: flex;
		justify-content: space-between !important;
	}

	.divtable {
		width: 100%;
		height: calc(50% - 36px);
	}
</style>
<style>

</style>
